<!DOCTYPE html>
<html>
<head>
<title>{$site_name}</title>
<meta name="keywords" content="{$site_seo_keywords}" />
<meta name="description" content="{$site_seo_description}">
<meta name="author" content="ThinkCMF">
<tc_include file="Public:head" />
<style type="text/css">
.tab-content{overflow: visible;}
</style>
<!--加载Css-->
<load href="__PUBLIC__/js/shearphoto/css/ShearPhoto.css" />
</head>
<body class="body-white" id="top">
	<tc_include file="Public:nav" />

		<div class="container tc-main">
                <div class="row">
                    <div class="span3">
	                    <tc_include file="Public:usernav"/>
                    </div>
                    <div class="span9">
                           <div class="tabs">
                               <ul class="nav nav-tabs">
                                   <li class="active"><a href="#one" data-toggle="tab"><i class="fa fa-user"></i> 修改头像</a></li>
                               </ul>
                               <div class="tab-content">
					<div class="tab-pane active" id="one">
					<div class="row">
					<if condition="empty($user['avatar'])">
					<img src="__TMPL__/Public/images/headicon_128.png" class="headicon" id="avatar_big" style="max-width:128px"/>
					<else/>
					<img src="{:sp_get_user_avatar_url($avatar)}?t={:time()}" class="headicon" id="avatar_big"/>
					</if>
					<div id="shearphoto_loading">程序加载中......</div>
					<div id="shearphoto_main">
						<div class="Effects" id="shearphoto_Effects" autocomplete="off">
							<strong class="EffectsStrong">截图效果</strong>
							<a href="javascript:;" StrEvent="原图" class="Aclick"><img src="__PUBLIC__/js/shearphoto/images/Effects/e0.jpg"/>原图</a>
							<a href="javascript:;" StrEvent="美肤"><img src="__PUBLIC__/js/shearphoto/images/Effects/e1.jpg"/>美肤效果</a>
							<a href="javascript:;" StrEvent="素描"><img src="__PUBLIC__/js/shearphoto/images/Effects/e2.jpg"/>素描效果</a>
							<a href="javascript:;" StrEvent="自然增强"><img src="__PUBLIC__/js/shearphoto/images/Effects/e3.jpg" />自然增强</a>
							<a href="javascript:;" StrEvent="紫调"><img src="__PUBLIC__/js/shearphoto/images/Effects/e4.jpg" />紫调效果</a>
							<a href="javascript:;" StrEvent="柔焦"><img src="__PUBLIC__/js/shearphoto/images/Effects/e5.jpg"/>柔焦效果</a>
							<a href="javascript:;" StrEvent="复古"><img src="__PUBLIC__/js/shearphoto/images/Effects/e6.jpg"/>复古效果</a>
							<a href="javascript:;" StrEvent="黑白"><img src="__PUBLIC__/js/shearphoto/images/Effects/e7.jpg"/>黑白效果</a>
							<a href="javascript:;" StrEvent="仿lomo"><img src="__PUBLIC__/js/shearphoto/images/Effects/e8.jpg"/>仿lomo</a>
							<a href="javascript:;" StrEvent="亮白增强"><img src="__PUBLIC__/js/shearphoto/images/Effects/e9.jpg"/>亮白增强</a>
							<a href="javascript:;" StrEvent="灰白"><img src="__PUBLIC__/js/shearphoto/images/Effects/e10.jpg"/>灰白效果</a>
							<a href="javascript:;" StrEvent="灰色"><img src="__PUBLIC__/js/shearphoto/images/Effects/e11.jpg"/>灰色效果</a>
							<a href="javascript:;" StrEvent="暖秋"><img src="__PUBLIC__/js/shearphoto/images/Effects/e12.jpg"/>暖秋效果</a>
							<a href="javascript:;" StrEvent="木雕"><img src="__PUBLIC__/js/shearphoto/images/Effects/e13.jpg"/>木雕效果</a>
							<a href="javascript:;" StrEvent="粗糙"><img src="__PUBLIC__/js/shearphoto/images/Effects/e14.jpg"/>粗糙效果</a>
						</div>
						<div class="primary"> 
							<div id="main">
								<div class="point"></div>
								<div id="SelectBox">
									<form    id="ShearPhotoForm" enctype="multipart/form-data" method="post"  target="POSTiframe">
									<a href="javascript:;" id="selectImage"><input type="file"  name="UpFile" autocomplete="off"/></a>
									</form>           
									<a href="javascript:;" id="PhotoLoading"></a>
									<a href="javascript:;" id="camerasImage"></a>
								</div>
								<div id="relat">
									<div id="black"></div>
									<div id="movebox">
										<div id="smallbox">
										<img src="__PUBLIC__/js/shearphoto/images/default.gif" class="MoveImg"  style="max-width:300%"/>
										</div>
										<i id="borderTop"></i>
										<i id="borderLeft"></i>
										<i id="borderRight"></i>
										<i id="borderBottom"></i>
										<i id="BottomRight"></i>
										<i id="TopRight"></i>
										<i id="Bottomleft"></i>
										<i id="Topleft"></i>
										<i id="Topmiddle"></i>
										<i id="leftmiddle"></i>
										<i id="Rightmiddle"></i>
										<i id="Bottommiddle"></i>
									</div>
									<img src="__PUBLIC__/js/shearphoto/images/default.gif" class="BigImg" />
								</div>
							</div> 
							<div style="clear: both"></div>
							<div id="Shearbar">
								<a id="LeftRotate" href="javascript:;"><em></em>向左旋转</a>
								<em class="hint L"></em>
								<div class="ZoomDist" id="ZoomDist">
									<div id="Zoomcentre"></div>
									<div id="ZoomBar"></div>
									<span class="progress"></span>
								</div>
								<em class="hint R"></em>
								<a id="RightRotate" href="javascript:;">向右旋转<em></em></a>
								<p class="Psava">
									<a id="againIMG"  href="javascript:;">重新选择</a>
									<a id="saveShear" href="javascript:;">保存截图</a>
								</p>
							</div>
						</div>   
						<div style="clear: both"></div>
					</div>
					<div id="photoalbum">
						<i id="close"></i>
						<ul>
							<li><img src="__PUBLIC__/js/shearphoto/file/photo/1.jpg" serveUrl="file/photo/1.jpg" /></li>
							<li><img src="__PUBLIC__/js/shearphoto/file/photo/2.jpg" serveUrl="file/photo/2.jpg" /></li>
							<li><img src="__PUBLIC__/js/shearphoto/file/photo/3.jpg" serveUrl="file/photo/3.jpg" /></li>
							<li><img src="__PUBLIC__/js/shearphoto/file/photo/4.jpg" serveUrl="file/photo/4.jpg" /></li>
							<li><img src="__PUBLIC__/js/shearphoto/file/photo/5.jpg" serveUrl="file/photo/5.jpg" /></li>
							<li><img src="__PUBLIC__/js/shearphoto/file/photo/6.jpg" serveUrl="file/photo/6.jpg" /></li>
							<li><img src="__PUBLIC__/js/shearphoto/file/photo/7.jpg" serveUrl="file/photo/7.jpg" /></li>
							<li><img src="__PUBLIC__/js/shearphoto/file/photo/8.jpg" serveUrl="file/photo/8.jpg" /></li>
						</ul>
					</div>
					<div id="CamBox">
						<p class="lens"></p>
						<div id="CamFlash"></div>
						<p class="cambar">
						<a href="javascript:;" id="CamOk"  >拍照</a>
						<a href="javascript:;" id="setCam">设置</a>
						<a href="javascript:;" id="camClose">关闭</a>
						<span style="clear:both;"></span>
						</p>
						<div id="timing"></div>
					</div>
				</div></div>
                               </div>							
                           </div>
                    </div>
                </div>

		<tc_include file="Public:footer" />

	</div>
	<!-- /container -->
	<!--加载Js-->
	<script  type="text/javascript" src="__PUBLIC__/js/shearphoto/js/ShearPhoto.js?t={:time()}" ></script>
	<script  type="text/javascript"  src="__PUBLIC__/js/shearphoto/js/webcam_ShearPhoto.js?t={:time()}" ></script>
	<script  type="text/javascript"  src="__PUBLIC__/js/shearphoto/js/alloyimage.js?t={:time()}" ></script>
	<script  type="text/javascript"  src="__PUBLIC__/js/shearphoto/js/handle.js?t={:time()}" ></script>
    <script type="text/javascript">
        var SHEAR = {
			PATH_RES: '__PUBLIC__/js',
			PATH_AVATAR: '__ROOT__/data/upload/avatar',
			URL:"{:U('profile/do_avatar')}",
        };
    </script>
	<tc_include file="Public:scripts" />
</body>
</html>